<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>平障处理页</title>
		<link rel="stylesheet" type="text/css" href="../../css/api.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/common.css"/>
		<style>
			body {
			}/* 顶部切换按钮导航栏 */
			.switch-container {
				padding: 15px 15px;
				background: #fff;
			}
			.switch-container > div {
				border: #FF9F00 2px solid;
				border-radius: 4px;
			}
			.switch-container .interval {
				width: 2px;
				height: 35px;
				background-color: #FF9F00;
			}
			.switch-container .btn-s {
				position: relative;
				text-align: center;
				height: 35px;
				line-height: 35px;
				color: #FF9F00;
				background-color: #fff;
			}
			.switch-container .btn-s.active {
				color: #fff;
				background-color: #FF9F00;
			}
			.switch-container .red-dot {
				position: absolute;
				top: 3px;
				height: 4px;
				width: 4px;
				border-radius: 50%;
				background-color: #ff0f2e;
				display: none;
			}
			.switch-container .red-dot.active {
				display: inline;
			}
			/* 需要派单的总计 */
			.order-count-container {
				padding: 0 15px;
				height: 20px;
				line-height: 20px;
				background-color: #f8f8f8;
				color: #919191;
				font-size: 13px;
			}
		</style>
	</head>
	<body>
		<header class="top-header">
			<div class="top-nav-content flex-container flex-between flex-center-v">
				<div class="back-pre-pg top-nav-left icon-arrow-left"></div>
				<div>
					平障处理
				</div>
				<div id="acms-btn-search" class="top-nav-right icon-search-white"></div>
			</div>
			<div class="switch-container">
				<div class="flex-container flex-center-v">
					<div class="btn-checked btn-s active flex-item" onclick="switchBtn(this)">
						<span>未完成</span>
					</div>
					<div class="interval"></div>
					<div class="btn-checked btn-s flex-item" onclick="switchBtn(this)">
						<span>已处理</span>
					</div>
				</div>
			</div>
			<div class="order-count-container">
				共计<span id="acms-cp-count">--</span>单
			</div>
		</header>
	</body>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/common.js"></script>
	<script type="text/javascript">
		//故障数的view
		var mCpCountView;
		//接障的总单数
		var mCpCount1 = 0;
		//结单的总单数
		var mCpCount2 = 0;
		//是否打开过frame
		var isOpen1 = false;
		var isOpen2 = false;
		apiready = function() {
			//适配iOS7+，Android4.4+状态栏沉浸式效果，详见config文档statusBarAppearance字段
			$api.fixStatusBar($api.dom('header'));
			initView();
			openFm(1);
		};
		function initView() {
			var doc = document;
			var btnSearch = doc.getElementById('acms-btn-search');
			mCpCountView = doc.getElementById('acms-cp-count');
			MyCom.backPrePg();
			btnSearch.onclick = function() {
				openSearchPg();
			}
			setShowCpCountListener();

		}

		/**
		 * 展示故障总数
		 * @param{Number} count - 故障数量
		 */
		function showCpCount(count) {
			mCpCountView.innerText = MyCom.dataFaultTolerant(count);
		}

		/**
		 * 顶部按钮切换
		 * @param{HtmlDom} tag - 被点击的view的对象
		 */
		function switchBtn(tag) {
			console.log('switchBtn');
			//检测按钮是否已经是选中状态，是，return
			console.log('tag.className=' + tag.className);
			if (tag.className.indexOf('active') != -1) {
				return;
			}
			var btns = document.getElementsByClassName('btn-checked');
			var len = btns.length;
			var i = 0;
			var index = 0;
			for (; i < len; i++) {
				if (tag == btns[i]) {
					index = i;
				} else {
					btns[i].className = 'btn-checked btn-s flex-item';
				}
			}
			btns[index].className = 'btn-checked btn-s active flex-item';
			openFm(index + 1);
		}

		/**
		 * 打开frame
		 * @{Number} index - 打开那个frame,从1开始
		 * @{String} msg - 搜索的内容
		 */
		function openFm(index, msg) {
			mIndex = index;
			msg = msg || null;
			index = index || 1;
			var url = '';
			var name = '';
			//根据index来判断打开那个frame
			if (index == 1) {//未完成
				url = './deal_order_frame1.html';
				name = 'deal_order_frame1';
				isOpen1 = true;
			} else {//已处理
				url = './deal_order_frame2.html';
				name = 'deal_order_frame2';
				isOpen2 = true;
			}
			api.openFrame({
				name : name,
				url : url,
				rect : {
					x : 0,
					y : getFrameY(),
					w : api.winWidth,
					h : 'auto'
				},
				pageParam : {
					'msg' : msg//传递搜索的内容
				}
			});
			if (isOpen1 && mIndex == 1) {
				showCpCount(mCpCount1);
			}
			if (isOpen2 && mIndex == 2) {
				showCpCount(mCpCount2);
			}
		}

		function getFrameY(){
			var frameheigh = $api.dom('header').offsetHeight;
			var systemType = api.systemType;
			if(api.systemType === 'ios'){
					var systemVersion = api.systemVersion;
					if(parseFloat(systemVersion) >= 11.0){
						frameheigh = frameheigh + 20;
					}
					return frameheigh;
			}
			return frameheigh;
		}

		/**
		 * 打开搜索页
		 */
		function openSearchPg() {
			api.openWin({
				name : 'search',
				url : '.././search.html',
				pageParam : {
					'tag' : 3
				}
			});
		}



		/**
		 * 设置“展示故障单总数”的监听
		 *
		 */
		function setShowCpCountListener() {
			api.addEventListener({
				name : 'ShowCpCountListener'
			}, function(ret, err) {
				if (ret) {
					var msg = ret.value.msg;
					if (mIndex == 1) {
						mCpCount1 = msg;
					} else if (mIndex == 2) {
						mCpCount2 = msg;
					}
					showCpCount(msg);
				} else {
					MyCom.errorTip(1);
				}
			});
		}
	</script>
</html>
